<template>
  <div class="app-container">
    <h2 style="text-align: center" >发布新文章</h2>
<!--    <h2 style="text-align: center">修改课程基本信息</h2>-->
    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input
          v-model="articleInfo.title"
          placeholder="示例：互联网+职业技能培训”成技能学习新业态"
        />
      </el-form-item>

      <!-- 所属分类 -->
      <el-form-item label="文章类型">
        <el-select v-model="articleInfo.categoryId" placeholder="文章类型">
          <el-option
            v-for="one in categoryList"
            :key="one.id"
            :label="one.name"
            :value="one.id"
          ></el-option>
        </el-select>
      </el-form-item>


      <!--课程讲师-->
      <el-form-item label="文章讲师">
        <el-select v-model="articleInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherLists"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          ></el-option>
        </el-select>
      </el-form-item>


      <!-- 课程简介-->
<!--      <el-form-item label="课程简介">-->
<!--        <tinymce :height="300" v-model="courseInfo.description"/>-->
<!--      </el-form-item>-->
      <!--@imgDel="$imgDel"-->
      <el-form-item label="文章内容">
        <mavon-editor ref=md @imgAdd="imgAdd" :ishljs = "true"  v-model="articleInfo.content" :toolbars="toolbars"  style="height: 400px"/>
      </el-form-item>
      <el-form-item label="文章封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API + '/eduoss/fileoss'"
          class="avatar-uploader"
        >
          <img :src="articleInfo.coverImage" width="300px" height="300px"/>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
        >保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import course from '../../../api/course/course'
  import article from '../../../api/article/article'
  export default {
      data(){
        return {
          saveBtnDisabled: false,
          articleInfo: {
            coverImage: "/static/01.png",
          },
          articleId:"",
          teacherLists:[],//封装所有的讲师
          categoryList:[],
          BASE_API:process.env.BASE_API,//接口api地址
          toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            strikethrough: true, // 中划线
            mark: true, // 标记
            superscript: true, // 上角标
            subscript: true, // 下角标
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 无序列表
            link: true, // 链接
            imagelink: true, // 图片链接
            code: true, // code
            table: true, // 表格
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            htmlcode: true, // 展示html源码
            help: true, // 帮助
            /* 1.3.5 */
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            save: true, // 保存（触发events中的save事件）
            /* 1.4.2 */
            navigation: true, // 导航目录
            /* 2.1.8 */
            alignleft: true, // 左对齐
            aligncenter: true, // 居中
            alignright: true, // 右对齐
            /* 2.2.1 */
            subfield: true, // 单双栏模式
            preview: true, // 预览
          },
        };
      },
      created() {
        //判断路径中是否有课程id
        if(this.$route.params&&this.$route.params.id){
          this.articleId = this.$route.params.id
          //根据课程id 查询课程基本信息
          this.getArticleInfo()
        }else{
          this.getListCategory();
          this.getListTeacher();
        }

      },
      methods:{

        getArticleInfo(){
          article.getArticleById(this.articleId)
          .then(resp=>{
            this.articleInfo = resp.data.articleInfo;
          })
          this.getListCategory();
          this.getListTeacher();
        },
        saveOrUpdate(){
          if(!this.articleInfo.id){
            this.addArticle();
          }else{
            this.updateArticle();
          }
        },
        //添加课程
        addArticle(){
          article.addArticle(this.articleInfo).then(resp => {
            this.$message({
              message: "添加文章信息成功",
              type: "success",
            })
            //跳转到第二步，并带着这个课程生成的id
            this.$router.push({ path: "/article/list/" });
          });
        },
        //修改课程
        updateArticle(){
          article.updateArticleById(this.articleInfo).then(resp => {
            this.$message({
              message: "修改文章信息成功",
              type: "success",
            })
            //跳转到第二步，并带着这个课程生成的id
            this.$router.push({ path: "/article/list/" });
          });
        },
        //查询所有的类型
        getListCategory(){
          article.getArticleCategoryList()
          .then(resp=>{
            this.categoryList = resp.data.articleCategory;
          })
        },
        //查询所有讲师
        getListTeacher(){
          course.getListTeacher()
            .then(resp=>{
              this.teacherLists = resp.data.items;
            })
        },
        //上传封面成功调用的方法
        handleAvatarSuccess(res,file){
          this.articleInfo.coverImage = res.data.url;
          console.log("fff:"+this.articleInfo.coverImage)
        },
        //上传之前调用的方法
        beforeAvatarUpload(file){
          // const isJPG = file.type === "image/jpeg";
          // const isLt2M = file.size / 1024 / 1024 < 2;
          // if (!isJPG) {
          //   this.$message.error("上传头像图片只能是 JPG 格式!");
          // }
          // if (!isLt2M) {
          //   this.$message.error("上传头像图片大小不能超过 2MB!");
          // }
          // return isJPG && isLt2M;
        },
        // 绑定@imgAdd event
        imgAdd(pos, file){
          // 第一步.将图片上传到服务器.
          var formdata = new FormData();
          formdata.append('file', file);
          console.log(formdata)
          article.uploadOssFile(formdata)
          .then((resp) => {
            console.log("gggg:"+resp.data.url)
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            // $vm.$img2Url 详情见本页末尾
            this.$refs.md.$img2Url(pos, resp.data.url)
          })
        }
      }
  }
</script>

<style scoped>

</style>
